<template>
	<view class="padding">
		<u-form :model="formData" :rules="rules" ref="form">
			<u-form-item label="头像">
				<u-avatar @click="selectAvatar"
					:src="formData.avatarUrl?formData.avatarUrl:'https://i03piccdn.sogoucdn.com/aa852d73c1dbae45'"
					size="80"></u-avatar>
				<!-- <u-button @click="saveUserAvata">保存头像</u-button> -->
			</u-form-item>
			<u-form-item label="昵称" prop="username">
				<u-input v-model="formData.username"></u-input>
			</u-form-item>
			<u-form-item label="邮箱" prop="email">
				<u-input v-model="formData.email"></u-input>
			</u-form-item>
			<u-form-item label="个人介绍" prop="signature">
				<u-textarea v-model="formData.signature"></u-textarea>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="saveUserInfo">保存</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					avatarUrl: '',
					username: '',
					email: '',
					signature: ''
				},
				userId: uni.getStorageSync('userId'), // 假设用户ID存储在本地
				rules: {
					username: {
						required: false,
						message: ''
					},
					signature: {
						required: false,
						message: ''
					}
				}
			};
		},
		onLoad(options) {
			if (options.userInfo) {
				const userInfoStr = decodeURIComponent(options.userInfo);
				const userInfo = JSON.parse(userInfoStr);
				// 将 userInfo 数据赋值给 formData
				this.formData.avatarUrl = userInfo.avatarUrl;
				this.formData.username = userInfo.username;
				this.formData.email = userInfo.email;
				this.formData.signature = userInfo.signature;
			}
		},
		methods: {
			selectAvatar() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.formData.avatarUrl = res.tempFilePaths[0];
					}
				});
				
				const validateResult = this.$refs.form.validate();
				if (validateResult === undefined) {
					// 处理未设置 rules 的情况
					console.error('未设置表单验证规则');
					return;
				}
				validateResult.then(() => {
					if (this.formData.avatarUrl) {
						uni.uploadFile({
							url: 'http://localhost:8090/file/upload', // 替换为实际后端接口地址
							filePath: this.formData.avatarUrl,
							name: 'file',
							method: 'POST', 
							header: {
								'Content-Type': 'multipart/form-data'
							},
							success: (res) => {
								if(res.data.code == 200) {
									this.formData.avatarUrl = res.data.data
								}
								console.log("返回的文件格式",res)
							},
							fail: (err) => {
								console.error('保存中', err);
								// uni.showToast({
								// 	title: '保存失败，请重试',
								// 	icon: 'none'
								// });
							}
						});
					} else {
						uni.showToast({
							title: '请选择头像',
							icon: 'none'
						});
					}
				}).catch(() => {
					// 验证失败处理
					uni.showToast({
						title: '请检查输入信息',
						icon: 'none'
					});
				});
				
			},
			// saveUserAvata() {
			// 	const validateResult = this.$refs.form.validate();
			// 	if (validateResult === undefined) {
			// 		// 处理未设置 rules 的情况
			// 		console.error('未设置表单验证规则');
			// 		return;
			// 	}
			// 	validateResult.then(() => {
			// 		if (this.formData.avatarUrl) {
			// 			uni.uploadFile({
			// 				url: 'http://localhost:8090/file/upload', // 替换为实际后端接口地址
			// 				filePath: this.formData.avatarUrl,
			// 				name: 'file',
			// 				method: 'POST', 
			// 				header: {
			// 					'Content-Type': 'multipart/form-data'
			// 				},
			// 				success: (res) => {
			// 					if(res.data.code == 200) {
			// 						this.formData.avatarUrl = res.data.data
			// 					}
			// 					console.log("放回的文件格式",res)
			// 				},
			// 				fail: (err) => {
			// 					console.error('保存失败', err);
			// 					uni.showToast({
			// 						title: '保存失败，请重试',
			// 						icon: 'none'
			// 					});
			// 				}
			// 			});
			// 		} else {
			// 			uni.showToast({
			// 				title: '请选择头像',
			// 				icon: 'none'
			// 			});
			// 		}
			// 	}).catch(() => {
			// 		// 验证失败处理
			// 		uni.showToast({
			// 			title: '请检查输入信息',
			// 			icon: 'none'
			// 		});
			// 	});
			// },
			saveUserInfo() {
				const validateResult = this.$refs.form.validate();
				if (validateResult === undefined) {
					// 处理未设置 rules 的情况
					console.error('未设置表单验证规则');
					return;
				}
				validateResult.then(() => {
					uni.request({
						url: `http://localhost:8090/user/${this.userId}/info`, // 替换为实际后端接口地址
						method: 'POST',
						data: {
							userId: this.userId,
							username: this.formData.username,
							avatarUrl:this.formData.avatarUrl,
							email: this.formData.email,
							signature: this.formData.signature
						},
						headers: {
							'Content-Type': 'application/json' // 设置请求头为 JSON 格式
						},
						success: (res) => {
							console.log(res.data)

							if (res.data.code === 200) {
								uni.reLaunch({
									url: '/pages/my/my'
								})
								// 跳转到 my 页面
								// uni.switchTab({
								// 	url: '/pages/my/my'
								// });
								uni.showToast({
									title: '修改信息成功',
									icon: 'none'
								});
							} else {
								uni.showToast({
									title: '用户信息更新失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('保存失败', err);
							uni.showToast({
								title: '保存失败，请重试',
								icon: 'none'
							});
						}
					});
				}).catch(() => {
					// 验证失败处理
					uni.showToast({
						title: '请检查输入信息',
						icon: 'none'
					});
				});
			}
		}
	};
</script>

<style>
</style>